
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下固定，中间内容可以滚动</title>
    <style type="text/css">
        html,body,.page{width:100%; height:100%;overflow:hidden;}
        .top,.con,.bottom{position:absolute; left:0; right:0;}
        .top{top:0;z-index:1; height:30px;background:#ff0;}
        .con{top:30px; bottom:40px; overflow:auto;}
        .bottom{bottom:0;z-index:1; height:40px;background:#00f;}

    </style>
</head>
<body>
<div class="wrap">
    <div class="top">头部</div>
    <div class="con">中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>
        中间内容<br/>

    </div>
    <div class="bottom">底部内容</div>
</div>
</body>
</html>